<!-- 平安永登全景看板组件 -->
<template>
  <div class="safeness">
    <div class="out">
      <label id="date">{{ nowDate }}</label>
      <iframe
        class="tianqi"
        width="180"
        scrolling="no"
        height="25"
        frameborder="0"
        allowtransparency="true"
        src="https://i.tianqi.com?c=code&id=26&color=%23FFFFFF&icon=1&site=12"
      ></iframe>
      <img @click="clickBtn" src="./image/tuichu.png" alt="退出" />
    </div>
    <!-- 左边 -->
    <div class="safeness_left">
      <h2 class="safeness_left_h2">
        <img src="./image/6dbt.png" alt="" />
        <i>矛盾纠纷排查化解(1-9月)</i>
      </h2>
      <!-- 左边上面 -->
      <div class="safeness_left_up">
        <!-- 左上标题 -->
        <div class="SafeeLeftTitles">
          <img class="SafeeLeftTitle_img1" src="./image/5mdjfjs.png" alt="" />
          <div class="spanimg">
            <span>{{ dispute }}</span>
            <img src="./image/7jian.png" alt="" />
          </div>
          <img src="./image/8bt (2).png" alt="" />
        </div>
        <!-- 已化解和未化解 -->
        <div class="defuse">
          <div class="defuse_yhj">
            <div class="defuse_div">
              <img src="./image/9_ws.png" alt="" />
            </div>
            <span>已化解:{{ HaveResolve }}件</span>
          </div>
          <div class="defuse_whj">
            <div class="defuse_div">
              <img src="./image/10_whj.png" alt="" />
            </div>
            <span>未化解:{{ NotPassed }}件</span>
          </div>
        </div>
      </div>
      <!-- 左边中间 -->
      <div class="safeness_left_center">
        <!-- 左中标题 -->
        <div class="SafeeLeftTitles">
          <img
            class="SafeeLeftTitle_img2"
            src="./image/11mdjflxfb.png"
            alt=""
          />
          <img
            class="SafeeLeftTitle_img3"
            src="./image/13Contradictions and disputes@2x.png"
            alt=""
          />
        </div>
        <!-- 左中内容 -->
        <div class="safeness_left_content">
          <div class="content">
            <ProgressBars />
            <div class="line"></div>
            <div class="figure">
              <span>0</span>
              <span>20</span>
              <span>40</span>
              <span>60</span>
              <span>80</span>
              <span>100</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 左边下面 -->
      <div class="safeness_left_down">
        <!-- 左下标题 -->
        <div class="SafeeLeftTitles">
          <img class="SafeeLeftTitle_img2" src="./image/12mdjfhj.png" alt="" />
          <img
            class="SafeeLeftTitle_img3"
            src="./image/14Resolving contradictions and disputes@2x (1).png"
            alt=""
          />
        </div>
        <Semicircle></Semicircle>
      </div>
    </div>

    <!-- 中间 -->
    <div class="safeness_center">
      <div class="center-bgimg">
        <!-- 中间左边 -->
        <div class="left-box">
          <!-- 总面积 -->
          <div class="totalArea">
            <div class="bj">
              <img src="./image/16zmj.png" alt="" />
            </div>
            <div class="pfgl"><span>6090</span>平方公里</div>
            <img class="totalAreaImg" src="./image/17zmjxx.png" alt="" />
          </div>
          <!-- 耕地面积 -->
          <div class="agriculturalAcreage">
            <div class="bj">
              <img src="./image/20gdmj.png" alt="" />
            </div>
            <div class="pfgl"><span>139</span>万多亩</div>
            <img class="totalAreaImg" src="./image/21hsxx.png" alt="" />
          </div>
          <!-- 天然林 -->
          <div class="naturalForest">
            <div class="bj">
              <img src="./image/23trl.png" alt="" />
            </div>
            <div class="pfgl"><span>90.8</span>万多亩</div>
            <img class="totalAreaImg" src="./image/21hsxx.png" alt="" />
          </div>
          <!-- 草地 -->
          <div class="grassland">
            <div class="bj">
              <img src="./image/24cd.png" alt="" />
            </div>
            <div class="pfgl"><span>548.2</span>万多亩</div>
            <img class="totalAreaImg" src="./image/21hsxx.png" alt="" />
          </div>
          <!-- 现辖 -->
          <div class="ItGoverns">
            <div class="bj">
              <img src="./image/26xx.png" alt="" />
            </div>
            <div class="pfgl">
              <p>3乡15镇\11个社区</p>
              <p>240个行政村</p>
            </div>
            <img class="totalAreaImg" src="./image/27xxx.png" alt="" />
          </div>
        </div>
        <!-- 中间右边 -->
        <div class="right-box">
          <DynamicProgressBar>
            <span slot="renshu">近53万人</span>
          </DynamicProgressBar>
          <DynamicProgressBar>
            <span slot="title">农业人口</span>
            <span slot="renshu">45.4万人</span>
          </DynamicProgressBar>
        </div>
        <!-- 中间大背景图 -->
        <div
          :class="'activeMap' + [index]"
          v-for="(item, index) in mapData"
          :key="index"
          :style="{ background: 'url(' + item.bgimg + ')' }"
        ></div>
        <div
          :class="['iconbtn' + [index], { iconActive: index == Current }]"
          class="icon-btn"
          v-for="(item, index) in mapData"
          :key="index + 'icon'"
          @mouseover="iconOver(index)"
          @mouseleave="iconLeave(index)"
        >
          <p>{{ item.name }}</p>
        </div>
        <img src="./image/mapmpap.png" alt="" class="mapImg" />
      </div>
      <div class="btn" @click="clickBtn"></div>
    </div>

    <!-- 右边 -->
    <div class="safeness_right">
      <SafenRight></SafenRight>
    </div>
  </div>
</template>

<script>
import SafenRight from './safeness_right.vue'
import ProgressBars from './ProgressBars'
import Semicircle from './ProgressSemicircle.vue'
import DynamicProgressBar from './DynamicProgressBar.vue'

export default {
  components: { SafenRight, ProgressBars, Semicircle, DynamicProgressBar },
  data () {
    return {
      // 矛盾纠纷件数
      dispute: 543,
      HaveResolve: 540,
      NotPassed: 3,
      // 当前日期
      nowDate: '',
      Current: null,
      mapData: [
        {
          name: '武胜驿镇',
          bgimg: require('./image/map1.png')
        },
        {
          name: '上川镇',
          bgimg: require('./image/map2.png')
        },
        {
          name: '民乐乡',
          bgimg: require('./image/map3.png')
        },
        {
          name: '永登县城关镇',
          bgimg: require('./image/map4.png')
        },
        {
          name: '柳树镇',
          bgimg: require('./image/map5.png')
        },
        {
          name: '连城镇',
          bgimg: require('./image/map6.png')
        },
        {
          name: '通远镇',
          bgimg: require('./image/map7.png')
        },
        {
          name: '大同镇',
          bgimg: require('./image/map8.png')
        },
        {
          name: '秦川镇',
          bgimg: require('./image/map9.png')
        },
        {
          name: '龙泉寺镇',
          bgimg: require('./image/map10.png')
        },
        {
          name: '河桥镇',
          bgimg: require('./image/map11.png')
        },
        {
          name: '七山乡',
          bgimg: require('./image/map12.png')
        },
        {
          name: '红城镇',
          bgimg: require('./image/map13.png')
        },
        {
          name: '苦水镇',
          bgimg: require('./image/map14.png')
        },
        {
          name: '中川镇',
          bgimg: require('./image/map15.png')
        }
      ]
    }
  },
  computed: {},
  watch: {},
  methods: {
    iconOver (index) {
      this.Current = index
      document.querySelector('.activeMap' + index).style.display = 'block'
    },
    iconLeave (index) {
      this.Current = null
      document.querySelector('.activeMap' + index).style.display = 'none'
    },
    clickBtn () {
      this.$router.push('/Management')
    },
    currentTime () {
      setInterval(this.formatDate, 500)
    },
    formatDate () {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() // 日
      const week = date.getDay() // 星期
      const weekArr = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      let hour = date.getHours() // 时
      hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      let minute = date.getMinutes() // 分
      minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      let second = date.getSeconds() // 秒
      second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}/${month}/${day} ${hour}:${minute}:${second} ${weekArr[week]}`
    }
  },
  created () {},
  mounted () {
    this.currentTime()
  },
  beforeDestroy () {
    if (this.formatDate) {
      clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>
<style lang="less" scoped>
.out {
  position: absolute;
  top: 14px;
  right: 40px;
}
.out img {
  position: relative;
  top: -18px;
  right: 0;
  cursor: pointer;
}
#date {
  display: block;
  right: 30px;
  position: relative;
}
.tianqi {
  right: 30px;
  position: relative;
}
.safeness {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img {
    vertical-align: middle;
  }
  width: 1920px;
  height: 1080px;
  background-image: url("./image/0_背景.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 85px;
  color: #fff;
  display: flex;
  // 左边
  .safeness_left {
    width: 518px;
    height: 978px;
    margin-left: 17px;
    background-image: url("./image/2zbjk.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 20px;
    .safeness_left_h2 {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 50px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        margin-top: 2px;
      }
      i {
        font-size: 25px;
      }
    }
    .SafeeLeftTitles {
      width: 474px;
      height: 36px;
      background-image: url("./image/标题栏.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding-left: 34px;
      padding-bottom: 8px;
      margin-left: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    // 左边上面
    .safeness_left_up {
      // 左边上面标题
      .SafeeLeftTitles {
        .SafeeLeftTitle_img1 {
          width: 154px;
        }
        .spanimg {
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
          span {
            font-size: 22px;
            font-style: italic;
            font-family: YouShe;
          }
        }
      }
      // 已化解和未化解
      .defuse {
        margin-top: 48px;
        margin-left: 57px;
        font-size: 20px;
        font-family: YouShe;
        display: flex;
        .defuse_yhj,
        .defuse_whj {
          display: flex;
          align-items: center;
        }
        .defuse_div {
          width: 90px;
          height: 80px;
          margin-right: 5px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 45px;
            margin-bottom: 10px;
            animation: jump 3s ease infinite;
          }
        }
        .defuse_yhj {
          div {
            background-image: url("./image/9_wsdp.png");
          }
        }
        .defuse_whj {
          margin-left: 46px;
          div {
            background-image: url("./image/10_whjdp.png");
          }
        }
        @keyframes jump {
          0% {
            transform: translateY(0) scale(1);
          }
          /* 中间状态图片位移并且拉伸 */
          50% {
            transform: translateY(-10px);
          }
          100% {
            transform: translateY(0);
          }
        }
      }
    }
    // 左边中间
    .safeness_left_center {
      margin-top: 20px;
      // 左中标题
      .SafeeLeftTitles {
        .SafeeLeftTitle_img2 {
          width: 186px;
          height: 20.39px;
        }
        .SafeeLeftTitle_img3 {
          width: 165px;
          margin-bottom: -14px;
        }
      }
      // 左中内容
      .safeness_left_content {
        width: 91%;
        height: 330px;
        margin-left: 20px;
        .content {
          margin-top: 40px;
          .line {
            margin-top: 30px;
            width: 100%;
            border-bottom: 1px solid #00ffff;
          }
          .figure {
            font-family: YouShe;
            width: 340px;
            margin-left: 90px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
    //左边下面
    .safeness_left_down {
      .SafeeLeftTitle_img2 {
        width: 138px;
        height: 20.39px;
      }
      .SafeeLeftTitle_img3 {
        width: 225px;
        margin-bottom: -14px;
      }
    }
  }
  // 中间
  .safeness_center {
    width: 854px;
    height: 100%;
    position: relative;
    .center-bgimg {
      background-image: url("./image/dizuo.png");
      background-repeat: no-repeat;
      background-position: bottom center;
      height: 95%;
      position: relative;
      .mapImg {
        // animation: jump 4s ease infinite;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -40%);
        width: 80%;
      }
      // 中间左边
      .left-box {
        width: 220px;
        height: 450px;
        // background-color: rgba(255, 255, 255, 0.336);
        position: absolute;
        top: 5px;
        left: 10px;
        z-index: 2;
        .totalAreaImg {
          width: 80%;
        }
        // 总面积
        .totalArea {
          .bj {
            width: 74px;
            height: 24px;
            background-image: url("./image/15zmjbjk.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            img {
              width: 45px;
              margin-left: 22px;
            }
          }
          .pfgl {
            margin-left: 16px;
            font-size: 20px;
            color: #0096ff;
            font-weight: bold;
            span {
              display: inline-block;
              margin-right: 10px;
            }
          }
        }
        // 耕地面积
        .agriculturalAcreage {
          .bj {
            width: 84px;
            height: 24px;
            background-image: url("./image/19gdmj.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            img {
              width: 55px;
              margin-left: 22px;
            }
          }
          .pfgl {
            margin-left: 16px;
            font-size: 20px;
            color: #f6ff00;
            font-weight: bold;
          }
        }
        // 天然林
        .naturalForest {
          .bj {
            width: 84px;
            height: 24px;
            background-image: url("./image/22hssjb.png");
            background-repeat: no-repeat;
            background-position: 0 3px;
            background-size: 13% 62%;
            img {
              width: 58px;
              margin-left: 22px;
            }
          }
          .pfgl {
            margin-left: 16px;
            font-size: 20px;
            color: #f6ff00;
            font-weight: bold;
          }
        }
        // 草地
        .grassland {
          .bj {
            width: 84px;
            height: 24px;
            background-image: url("./image/22hssjb.png");
            background-repeat: no-repeat;
            background-position: 0 3px;
            background-size: 13% 62%;
            img {
              width: 42px;
              margin-left: 22px;
            }
          }
          .pfgl {
            margin-left: 16px;
            font-size: 20px;
            color: #f6ff00;
            font-weight: bold;
          }
        }
        // 现辖
        .ItGoverns {
          .bj {
            width: 74px;
            height: 24px;
            background-image: url("./image/25xxk.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            img {
              width: 39px;
              margin-left: 25px;
              margin-top: 2px;
            }
          }
          .pfgl {
            margin-left: 16px;
            font-size: 20px;
            color: #2afdfb;
            font-weight: bold;
            span {
              display: inline-block;
              margin-right: 10px;
            }
          }
        }
      }
      // 中间右边
      .right-box {
        width: 220px;
        height: 450px;
        // background-color: rgba(255, 255, 255, 0.336);
        position: absolute;
        top: 5px;
        right: 10px;
        z-index: 2;
      }
    }
    .btn {
      cursor: pointer;
      position: absolute;
      bottom: 40px;
      height: 56px;
      width: 188px;
      left: 50%;
      transform: translate(-50%);
      background-image: url("./image/anniubtn.png");
      background-repeat: no-repeat;
      background-position: bottom center;
    }
  }
  @keyframes jump {
    0% {
      transform: translateY(0) scale(1);
    }
    /* 中间状态图片位移并且拉伸 */
    50% {
      transform: translateY(-30px) scale(1);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }
  // 右边
  .safeness_right {
    width: 516px;
    height: 100%;
    margin-left: 5px;
  }
}
.activeMap0 {
  width: 313px;
  height: 287px;
  position: absolute;
  transform: scale(0.71);
  z-index: 20;
  display: none;
  top: 231px;
  left: 188px;
}
.activeMap1 {
  width: 368px;
  height: 368px;
  position: absolute;
  transform: scale(0.72);
  z-index: 20;
  display: none;
  top: 186px;
  left: 421px;
}
.activeMap2 {
  width: 236px;
  height: 360px;
  position: absolute;
  transform: scale(0.7);
  z-index: 20;
  display: none;
  top: 264px;
  left: 155px;
}
.activeMap3 {
  width: 253px;
  height: 304px;
  position: absolute;
  transform: scale(0.71);
  z-index: 20;
  display: none;
  top: 226px;
  left: 325px;
}
.activeMap4 {
  width: 270px;
  height: 261px;
  position: absolute;
  z-index: 20;
  display: none;
  transform: scale(0.67);
  top: 304px;
  left: 382px;
}
.activeMap5 {
  width: 293px;
  height: 309px;
  position: absolute;
  z-index: 20;
  display: none;
  transform: scale(0.71);
  top: 364px;
  left: 42px;
}
.activeMap6 {
  width: 297px;
  height: 286px;
  position: absolute;
  z-index: 20;
  display: none;
  transform: scale(0.73);
  top: 356px;
  left: 214px;
}
.activeMap7 {
  width: 281px;
  z-index: 20;
  height: 206px;
  position: absolute;
  display: none;
  transform: scale(0.73);
  top: 422px;
  left: 381px;
}
.activeMap8 {
  width: 273px;
  z-index: 20;
  height: 194px;
  position: absolute;
  display: none;
  transform: scale(0.71);
  top: 399px;
  left: 535px;
}
.activeMap9 {
  width: 415px;
  height: 290px;
  z-index: 20;
  position: absolute;
  display: none;
  transform: scale(0.68);
  top: 434px;
  left: 346px;
}
.activeMap10 {
  width: 210px;
  z-index: 20;
  height: 258px;
  position: absolute;
  display: none;
  transform: scale(0.71);
  top: 498px;
  left: 152px;
}
.activeMap11 {
  width: 307px;
  height: 354px;
  position: absolute;
  z-index: 20;
  display: none;
  transform: scale(0.75);
  top: 455px;
  left: 224px;
}
.activeMap12 {
  width: 274px;
  height: 197px;
  position: absolute;
  display: none;
  z-index: 20;
  transform: scale(0.71);
  top: 559px;
  left: 400px;
}
.activeMap13 {
  width: 293px;
  height: 216px;
  z-index: 20;
  position: absolute;
  display: none;
  transform: scale(0.73);
  top: 640px;
  left: 390px;
}
.activeMap14 {
  width: 294px;
  z-index: 20;
  height: 435px;
  position: absolute;
  display: none;
  transform: scale(0.75);
  top: 442px;
  left: 516px;
}
.icon-btn {
  position: absolute;
  z-index: 21;
  transform: scale(0.9);
  background-image: url("./image/icon1.png");
  width: auto;
  height: 45px;
  background-size: 38px;
  background-repeat: no-repeat;
  background-position: top center;

}
@keyframes jumpIcon {
    0% {
      transform: translateY(0) scale(1);
    }
    /* 中间状态图片位移并且拉伸 */
    50% {
      transform: translateY(-10px) scale(1);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }
.iconActive {
  background-image: url("./image/icon2.png");
  animation: jumpIcon 1s ease infinite;
}
.icon-btn p {
  text-align: center;
  color: #ffffff;
  text-shadow: 0px 2px 1px #40a3dd;
  padding-top: 39px;
}
.iconbtn0 {
  top: 324px;
  left: 324px;
}
.iconbtn1 {
  top: 364px;
  left: 596px;
}
.iconbtn2 {
  top: 405px;
  left: 255px;
}
.iconbtn3 {
  top: 358px;
  left: 402px;
}
.iconbtn4 {
  top: 397px;
  left: 508px;
}
.iconbtn5 {
  top: 470px;
  left: 164px;
}
.iconbtn6 {
  top: 454px;
  left: 342px;
}
.iconbtn7 {
  top: 498px;
  left: 514px;
}
.iconbtn8 {
  top: 477px;
  left: 660px;
}
.iconbtn9 {
  top: 536px;
  left: 585px;
}
.iconbtn10 {
  top: 602px;
  left: 217px;
}
.iconbtn11 {
  top: 605px;
  left: 350px;
}
.iconbtn12 {
  top: 630px;
  left: 508px;
}
.iconbtn13 {
  top: 724px;
  left: 514px;
}
.iconbtn14 {
  top: 674px;
  left: 624px;
}
</style>
